<template>
    <div class="search_box">
        <!-- <headerBack>电影搜索</headerBack> -->
        <div class="search_nav">
            <div class="city_search">
                <div class="input" >
                    <span><i class="el-icon-search search_icon"></i></span>
                    <input type="text" placeholder="找影视剧、影人、影院" v-model="searchWord" @input="searchInput">
                    <span @click="clearInput" v-if="searchWord.length"><i class="el-icon-error error"></i></span>
                </div>
                <div class="cancel" @click="cancel" >取消</div>
            </div>  
        </div>
        
            <div style="height:100%;overflow: hidden;"> 
                <Scroller>
                <div class="movies_search" >
                    <!-- 影院 -->
                    <CinemaList  class="cinemas_list" v-if="cinemas" :cinemas="cinemas">
                        <div class="movies_list_title">影院</div>
                        <template v-slot:cinemas>
                            <div class="movies_total">查看全部{{cinemas.total}}家影院&nbsp;<i class="el-icon-arrow-right"></i></div>
                        </template>
                    </CinemaList>
                    <!-- 电影 -->
                    <MovieList class="movies_list" v-if="movies" :movies="movies" >  
                        <div class="movies_list_title">电影/电视剧/综艺</div>
                        <template v-slot:movies>
                            <div class="movies_total">查看全部{{movies.total}}部影视剧&nbsp;<i class="el-icon-arrow-right"></i></div>
                        </template>
                    </MovieList>

                    <HistoryList class="search_history" v-if="historyList.length && isInput" :history-list="historyList">

                    </HistoryList>
                </div>
                 </Scroller>
            </div>
       
    </div>
</template>
<script>
import { mapState } from 'vuex'

import headerBack from '../../header/headerBack'
import MovieList from '../movieSearch/moviesList'
import CinemaList from '../movieSearch/cinemasList'
import HistoryList from '../movieSearch/historyList'
export default {
    data() {
        return {
            searchWord:'',
            city:'',
            timer:null,
            movies:null,
            cinemas:null,
            historyList:[],
            isInput:true
        }
    },
    computed:{
        ...mapState(['currentCity'])
    },
    components:{headerBack,MovieList,HistoryList,CinemaList},
    mounted() {
        if(localStorage.historyList) {
             this.historyList = JSON.parse(localStorage.historyList)
        }
        this.city = {...this.$route.query };

    },
    methods:{
        searchInput() {
            this.isInput = false
            clearTimeout(this.timer)         
            this.timer = setTimeout(this.shake,500)
           
        },
        clearInput() {
            this.searchWord = '';
            this.isInput = true
            this.cinemas= null
            this.movies= null
        },
        cancel() {
            this.$router.back()
        },
        shake () {
            if(this.searchWord.trim()) {
                if(this.historyList.indexOf(this.searchWord.trim()) < 0){
                    this.historyList.push(this.searchWord.trim());
                    localStorage.setItem('historyList',JSON.stringify(this.historyList))
                }
                this.axios.get(`/ajax/search?kw=${this.searchWord}&cityId=${this.currentCity.id}&stype=-1`).then(res=>{
                        console.log(res)
                        this.movies = res.data.movies;
                        this.cinemas =  res.data.cinemas
                })               
            }
        },
    }
}
</script>
<style scoped> 
    .search_box{width: 100%;height: 100%;overflow: hidden;}
    .search_nav{position: relative;height: 50px}

    .city_search{width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 10px 8px;background-color:#FAFAFA;color: #fff;}
    .search_icon{color: #999;margin: 0 5px}
    .input{flex-grow: 1;display: flex;flex-direction: row;align-items: center;width: 100%;border-radius: 20px;background-color: #EAEAEA;padding: 2px;margin-right: 5px;font-size: 14px;color: #333;line-height: 18px}
    .input input{height: 100%;flex-grow: 1;margin-right:10px;outline: none;border: none;background-color: #EAEAEA;padding: 5px 0;font-size: 13px;}
    .error{color: #999;margin-right: 5px}
    .cancel{flex-shrink: 0;font-size: 13px;color: #e54847;margin: 0 5px}


    .movies_search{background:#fff; }
    .movies_list{background: #fff;margin-top: 20px;}
    .movies_list_title{padding: 10px 8px;border-bottom: 1px solid #f2f2f2;font-size: 14px;color: #333;}
    .movies_total{font-size: 14px;color: #e54847;text-align: center;padding: 15px 0 ;}

    .cinemas_list{background: #fff;}


    .search_history{
        background-color: #fff;
    }
</style>